<template>
    
    <div class="chat-container">
      <!-- 用户消息(右侧) -->
      <div class="message user-message" v-if="query">
        <div class="message-content">
          <div class="message-bubble user-bubble">
            {{ query }}
          </div>
        </div>
        <div class="avatar-wrapper">
          <img class="avatar" :src="baseAvatar['user']" alt="User">
        </div>
      </div>
  
      <!-- AI消息(左侧) -->
      <div class="message bot-message" v-if="answer">
        <div class="avatar-wrapper">
          <img v-if="baseAvatar[model_name]" class="avatar" :src="baseAvatar[model_name]" alt="Bot Avatar">
          <img v-else class="avatar" :src="baseAvatar['default']" alt="Default Bot Avatar">
        </div>
        <div class="message-content">
          <div class="message-bubble bot-bubble">
            <!-- {{answer }} -->
            <v-md-preview :text="answer" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
          </div>
          <!-- 回答统计 -->
          <div class="message-footer" v-if="chat_detail && responseTime && finishTime">
            <span class="stats">回答耗时: {{finishTime - responseTime}} ms</span>
            <span class="stats">字数: {{answer.length}} 字符</span>
            <el-icon class="copy-icon" @click="copyText"><CopyDocument /></el-icon>
            <el-button size="mini" class="regenerate-btn" @click="regenerate">🔄 重新生成</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChatCard',
    data() {
      return {
        baseAvatar: this.$store.state.setting.baseAvatar
      }
    },
    props: {
      answer: String,
      query: String,
      model_name: String,
      responseTime: Number,
      finishTime: Number,
    },
    computed: {
      chat_detail() {
        return this.$store.state.setting.chat_detail;
      }
    },
    methods: {
      handleCopyCodeSuccess(code) {
        this.$notify({
          title: '复制成功！',
          type: 'success',
        });
      },
      async copyText() {
        try {
          await navigator.clipboard.writeText(this.answer);
          this.$notify({
            title: '复制成功！',
            type: 'success',
          });
        } catch (error) {
          console.log('文本内容复制error:', error)
          this.$notify({
            title: '复制失败！',
            type: 'error',
          });
        }
      },
      async regenerate() {
      this.isLoading = true;
      this.error = null;
      
      try {
        const newAnswer = await this.$api.regenerate({
          id: this.messageId,
          prompt: this.query
        });
        
        this.$emit('update:answer', newAnswer);
      } catch (err) {
        this.error = err.message;
        this.$notify.error({
          title: '生成错误',
          message: err.message
        });
      } finally {
        this.isLoading = false;
      }
    }
    }
  }
  </script>
  
  <style lang="scss" scoped>
   /* 科技感主题变量 */
  $tech-primary: #01ffff;
  $tech-bg-dark: #0a1a2e;
  $tech-bg-light: rgba(22, 68, 124, 0.3);
  $tech-border: rgba(31, 159, 191, 0.8);
  $tech-glow: 0 0 10px rgba(1, 255, 255, 0.5);
  .chat-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    // background: linear-gradient(135deg, #0a2e5a 0%, #16447c 100%);
  }
  
  .message {
    display: flex;
    margin-bottom: 16px;
    max-width: 80%;
    .avatar-wrapper {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin: 0 8px;
        border-radius: 50%;
        // background: linear-gradient(135deg, $tech-primary, #3a94f4);
        padding: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: $tech-glow;
        order: -1;
    
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      // border: 1px solid rgba(255, 255, 255, 0.1);
      // background: #0a2e5a;
    }
    }
    
    .message-content {
      display: flex;
      flex-direction: column;
    }
    
    .message-bubble {
        color: #fff;
      padding: 10px 15px;
      border-radius: 4px;
      position: relative;
      line-height: 1.5;
      font-size: 14px;
      word-wrap: break-word;
      white-space: pre-wrap;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        // background: linear-gradient(90deg, transparent, $tech-primary, transparent);
    }
  
  /* 气泡边角科技感装饰 */
    // &::after {
    //     content: '';
    //     position: absolute;
    //     width: 10px;
    //     height: 10px;
    //     border: 2px solid $tech-primary;
    // }
    }
  }
  
  .user-message {
    margin-left: auto;
    flex-direction: row-reverse;
    
    .message-bubble {
      background: linear-gradient(135deg, rgba(245, 240, 186, 0.8), rgba(228, 242, 100, 0.9));
      color: var(--chat-card-font-color);
      border-top-right-radius: 0;
      
      &::after {
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
      }
    }
  }
  
  .bot-message {
    margin-right: auto;    
    .message-bubble {
      background: linear-gradient(135deg, rgba(186, 247, 166, 0.8), rgba(98, 226, 91, 0.9));
      color: var(--chat-card-font-color);
      border-top-left-radius: 0;
      
      &::after {
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
      }
    }
  }
  
  .message-footer {
    display: flex;
    align-items: center;
    margin-top: 6px;
    font-size: 12px;
    color: #999;
  
    .stats {
      margin-right: 10px;
    }
  
    .copy-icon {
      margin-left: 8px;
      cursor: pointer;
      color: #999;
      
      &:hover {
        color: #666;
      }
    }
  
    .regenerate-btn {
      margin-left: 10px;
      background: transparent;
      border-color: #ddd;
      color: #666;
      padding: 3px 8px;
      
      &:hover {
        background: #f5f5f5;
      }
    }
  }
  
  /* Markdown预览样式调整 */
  :deep(.v-md-editor-preview) {
    background: transparent !important;
  }
  
  :deep(.vuepress-markdown-body) {
    background: transparent !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: var(--chat-card-font-color) !important;
  }
  
  :deep(pre) {
    // background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px;
  }
  
  @media (max-width: 768px) {
    .message {
      max-width: 90%;
    }
  }
  </style>